@use "sass:color";
@use "sass:string";

$disabled-bg: var(--disabled-bg);

// dialog 相关
$dialog-top: var(--dialog-top);

// layout相关
$nav-bg-dark-heavy: var(--nav-bg-dark-heavy);
$nav-bg-dark: var(--nav-bg-dark);
$nav-bg-light: var(--nav-bg-light);
$nav-text-color-light: var(--nav-text-color-light);
$nav-text-color-dark: var(--nav-text-color-dark);

$header-height: var(--header-height); // large:60px default:56px small:52px
$asider-width: var(--asider-width); // large:220px default:200px small:180px
$main-menu-width: var(--main-menu-width); // large:80px default:70px small:60px
$page-tags-height: var(--page-tags-height); // large:44px default:40px small:36px

// 间距相关
$gap-qtr: var(--gap-qtr);
$gap-half: var(--gap-half);
$gap-half-qtr: var(--gap-half-qtr);
$gap: var(--gap);
$gap-one-half: var(--gap-one-half);
$gap-two: var(--gap-two);

// 主题颜色
// $color-primary: #ff8000; // 因为ElementPlus 底层用到了 color.mix 运算，所以不能够直接使用 $color-primary 变量
$color-primary: var(--color-primary);
$color-danger: var(--color-danger);
$color-info: var(--color-info);
$color-success: var(--color-success);
$color-warning: var(--color-warning);

// 文本颜色
$color-text-heavyer: var(--color-text-heavyer);
$color-text-heavy: var(--color-text-heavy);
$color-text-main: var(--color-text-main); // 最接近的网页安全色 #141414
$color-text-light: var(--color-text-light);
$color-text-lighter: var(--color-text-lighter);
$color-text-lightest: var(--color-text-lightest); // 禁用、placeholder的颜色

// 背景颜色
$color-bg-heavyest: color-mix(in srgb, var(--color-primary) 30%, #ffffff 70%); // color.mix($color-primary, #ffffff, 30%);
$color-bg-heavyer: color-mix(in srgb, var(--color-primary) 25%, #ffffff 75%); // color.mix($color-primary, #ffffff, 25%);
$color-bg-heavy: color-mix(in srgb, var(--color-primary) 20%, #ffffff 80%); // color.mix($color-primary, #ffffff, 20%);
$color-bg-main: color-mix(in srgb, var(--color-primary) 15%, #ffffff 85%); // color.mix($color-primary, #ffffff, 15%);
$color-bg-light: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%); // color.mix($color-primary, #ffffff, 10%);
$color-bg-lighter: color-mix(in srgb, var(--color-primary) 5%, #ffffff 95%); // color.mix($color-primary, #ffffff, 5%);
$color-bg-white: var(--color-bg-white);

// 边框颜色
$color-border-heavyer: var(--color-border-heavyer);
$color-border-heavy: var(--color-border-heavy);
$color-border-main: var(--color-border-main);
$color-border-light: var(--color-border-light);
$color-border-lighter: var(--color-border-lighter);

// 边框简写
$border-heavyer: 1px solid var(--color-border-heavyer);
$border-heavy: 1px solid var(--color-border-heavy);
$border-main: 1px solid var(--color-border-main);
$border-light: 1px solid var(--color-border-light);
$border-lighter: 1px solid var(--color-border-lighter);

// 边框圆角
$radius-heavyer: var(--radius-heavyer);
$radius-heavy: var(--radius-heavy);
$radius-main: var(--radius-main);
$radius-light: var(--radius-light);
$radius-lighter: var(--radius-lighter);

// 盒子高度
$height-heavy: var(--height-heavy);
$height-main: var(--height-main);
$height-light: var(--height-light);

/* 组件大小的高度 */
$size-large: var(--size-large);
$size-default: var(--size-default);
$size-small: var(--size-small);

//字体大小
$font-size-heavyest: var(--font-size-heavyest);
$font-size-heavyer: var(--font-size-heavyer);
$font-size-heavy: var(--font-size-heavy);
$font-size-main: var(--font-size-main);
$font-size-light: var(--font-size-light);
$font-size-lighter: var(--font-size-lighter);

// 盒子阴影
$shadow-heavy: var(--shadow-heavy);
$shadow-main: var(--shadow-main);
$shadow-light: var(--shadow-light);
$shadow-lighter: var(--shadow-lighter);

// 动画过渡
$transition-time-main: 0.3s;

// 其他渐变
$color-gradient-dark-light: #08dca2;
$color-gradient-dark-dark: #015db1;
$color-gradient-dark: linear-gradient(-30deg, $color-gradient-dark-light 0%, $color-gradient-dark-dark 100%);
$color-gradient-light: linear-gradient(135deg, #e2f7f3 0%, #dbe6f0 100%);
// 背景渐变
$color-bg-gradient-light: linear-gradient(90deg, #dbecf7 0%, #dafaf4 100%);
$color-bg-gradient-dark: linear-gradient(-30deg, $color-gradient-dark-light 0%, $color-gradient-dark-dark 100%);

// 文本省略(下面的注释不能删除，否则中间的那行代码将不会被保存编译到css文件里面）
@mixin text-ellipsis($num) {
  text-overflow: ellipsis;
  overflow: hidden;
  /*! autoprefixer: ignore next */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
}

//渐变色文字
@mixin text-gradient() {
  color: $color-primary;
  background-image: -webkit-linear-gradient(135deg, $color-gradient-dark-light 0%, $color-gradient-dark-dark 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@mixin opacity-img-box() {
  box-shadow: 0 0 16px 0px rgba(#fff, 0.2), 0 0 4px 0px rgba(#fff, 0.5);
  border: 1px solid rgba(#fff, 0.2);
  background: url() no-repeat 0 0 / cover rgba(#fff, 0.1);
}

//阴影与悬浮阴影
@mixin shadow-main() {
  box-shadow: $shadow-light;
  transition: all $transition-time-main;
  &:hover {
    box-shadow: $shadow-heavy;
  }
}

/**
* 通过before绘制三角形
* @param $position 箭头所在位置：top-left ~ bottom-right 的组合
  $at 箭头所在位置：top,right,bottom,left
  $near 在position的距离最近的位置 top,right,bottom,left
* @param $distance $near 在position的距离最近的位置$at的距离
* @param width 箭头的宽
* @param height 箭头的高
* @param bgColor 箭头的背景色
*/
@mixin triangle($position: top-right, $distance: 16px, $width: 14px, $height: 16px, $bgColor: #3b3b3b, $pseudoPosition: before) {
  $ind: string.index($position, "-");
  $at: string.slice($position, 1, $ind - 1);
  $near: string.slice($position, $ind + 1);
  &::#{$pseudoPosition} {
    position: absolute;
    #{$near}: $distance;

    @if $at == "bottom" or $at == "top" {
      #{$at}: $height * -1.65;
    } @else {
      #{$at}: $width * -1.65;
    }

    box-sizing: content-box;
    display: block;
    width: 0;
    height: 0;
    content: "";
    border-top: $width solid #{if($at == "bottom", $bgColor, transparent)};
    border-right: $width solid #{if($at == "left", $bgColor, transparent)};
    border-bottom: $width solid #{if($at == "top", $bgColor, transparent)};
    border-left: $width solid #{if($at == "right", $bgColor, transparent)};
  }
}
